<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox基础 | 弹性盒子模型</title>
    <style>
        /* CSS变量定义 */
        :root {
            --primary-color: #4a90e2;
            --secondary-color: #f39c12;
            --text-color: #333;
            --spacing: 1rem;
            --border-radius: 4px;
        }

        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            padding: var(--spacing);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 标题样式 */
        h1 {
            color: var(--primary-color);
            margin-bottom: var(--spacing);
            text-align: center;
        }

        h2 {
            color: var(--secondary-color);
            margin: 2rem 0 1rem;
        }

        /* 演示区块 */
        .demo-section {
            margin: 2rem 0;
            padding: var(--spacing);
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
        }

        /* 基础Flex容器 */
        .flex-container {
            display: flex;
            margin: 1rem 0;
            background-color: #f5f5f5;
            padding: var(--spacing);
            border-radius: var(--border-radius);
        }

        /* Flex项目 */
        .flex-item {
            padding: var(--spacing);
            background-color: var(--primary-color);
            color: white;
            border-radius: var(--border-radius);
            margin: 0.25rem;
            min-width: 100px;
            text-align: center;
        }

        /* 方向演示 */
        .flex-direction {
            margin-bottom: 2rem;
        }

        .flex-direction-row {
            flex-direction: row;
        }

        .flex-direction-column {
            flex-direction: column;
            height: 300px;
        }

        /* 换行演示 */
        .flex-wrap {
            flex-wrap: wrap;
        }

        .flex-nowrap {
            flex-wrap: nowrap;
        }

        /* 主轴对齐 */
        .justify-content > div {
            margin-bottom: 1rem;
        }

        .justify-start {
            justify-content: flex-start;
        }

        .justify-center {
            justify-content: center;
        }

        .justify-end {
            justify-content: flex-end;
        }

        .justify-between {
            justify-content: space-between;
        }

        .justify-around {
            justify-content: space-around;
        }

        /* 交叉轴对齐 */
        .align-items {
            height: 200px;
        }

        .align-start {
            align-items: flex-start;
        }

        .align-center {
            align-items: center;
        }

        .align-end {
            align-items: flex-end;
        }

        .align-stretch {
            align-items: stretch;
        }

        /* 控制面板 */
        .controls {
            margin: 1rem 0;
            padding: 1rem;
            background-color: #f8f9fa;
            border-radius: var(--border-radius);
        }

        .controls button {
            padding: 0.5rem 1rem;
            margin: 0.25rem;
            border: none;
            background-color: var(--primary-color);
            color: white;
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .controls button:hover {
            background-color: #357abd;
        }

        /* 说明文本 */
        .description {
            margin: 1rem 0;
            padding: 1rem;
            background-color: #fff3cd;
            border-radius: var(--border-radius);
            font-size: 0.9rem;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .flex-container {
                padding: 0.5rem;
            }

            .flex-item {
                min-width: 80px;
                padding: 0.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Flexbox基础：弹性盒子模型</h1>

        <section class="demo-section">
            <h2>1. Flex方向 (flex-direction)</h2>
            <div class="description">
                flex-direction 决定了主轴的方向，进而决定了 flex 项目的排列方向。
            </div>
            <div class="flex-direction">
                <div class="flex-container flex-direction-row">
                    <div class="flex-item">1</div>
                    <div class="flex-item">2</div>
                    <div class="flex-item">3</div>
                </div>
                <h3>flex-direction: column</h3>
                <div class="flex-container flex-direction-column">
                    <div class="flex-item">1</div>
                    <div class="flex-item">2</div>
                    <div class="flex-item">3</div>
                </div>
            </div>
        </section>

        <section class="demo-section">
            <h2>2. Flex换行 (flex-wrap)</h2>
            <div class="description">
                flex-wrap 控制 flex 项目是否换行，当容器空间不足时特别有用。
            </div>
            <h3>flex-wrap: wrap</h3>
            <div class="flex-container flex-wrap">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
                <div class="flex-item">4</div>
                <div class="flex-item">5</div>
                <div class="flex-item">6</div>
            </div>
            <h3>flex-wrap: nowrap</h3>
            <div class="flex-container flex-nowrap">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
                <div class="flex-item">3</div>
                <div class="flex-item">4</div>
                <div class="flex-item">5</div>
                <div class="flex-item">6</div>
            </div>
        </section>

        <section class="demo-section">
            <h2>3. 主轴对齐 (justify-content)</h2>
            <div class="description">
                justify-content 控制 flex 项目在主轴上的对齐方式。
            </div>
            <div class="justify-content">
                <h3>justify-content: flex-start</h3>
                <div class="flex-container justify-start">
                    <div class="flex-item">1</div>
                    <div class="flex-item">2</div>
                    <div class="flex-item">3</div>
                </div>
                <h3>justify-content: center</h3>
                <div class="flex-container justify-center">
                    <div class="flex-item">1</div>
                    <div class="flex-item">2</div>
                    <div class="flex-item">3</div>
                </div>
                <h3>justify-content: flex-end</h3>
                <div class="flex-container justify-end">
                    <div class="flex-item">1</div>
                    <div class="flex-item">2</div>
                    <div class="flex-item">3</div>
                </div>
                <h3>justify-content: space-between</h3>
                <div class="flex-container justify-between">
                    <div class="flex-item">1</div>
                    <div class="flex-item">2</div>
                    <div class="flex-item">3</div>
                </div>
                <h3>justify-content: space-around</h3>
                <div class="flex-container justify-around">
                    <div class="flex-item">1</div>
                    <div class="flex-item">2</div>
                    <div class="flex-item">3</div>
                </div>
            </div>
        </section>

        <section class="demo-section">
            <h2>4. 交叉轴对齐 (align-items)</h2>
            <div class="description">
                align-items 控制 flex 项目在交叉轴上的对齐方式。
            </div>
            <div class="align-items">
                <h3>align-items: flex-start</h3>
                <div class="flex-container align-start">
                    <div class="flex-item">1</div>
                    <div class="flex-item" style="height: 80px">2</div>
                    <div class="flex-item">3</div>
                </div>
                <h3>align-items: center</h3>
                <div class="flex-container align-center">
                    <div class="flex-item">1</div>
                    <div class="flex-item" style="height: 80px">2</div>
                    <div class="flex-item">3</div>
                </div>
                <h3>align-items: flex-end</h3>
                <div class="flex-container align-end">
                    <div class="flex-item">1</div>
                    <div class="flex-item" style="height: 80px">2</div>
                    <div class="flex-item">3</div>
                </div>
                <h3>align-items: stretch</h3>
                <div class="flex-container align-stretch">
                    <div class="flex-item">1</div>
                    <div class="flex-item">2</div>
                    <div class="flex-item">3</div>
                </div>
            </div>
        </section>
    </div>

    <script>
        // 添加交互功能
        document.addEventListener('DOMContentLoaded', () => {
            // 可以在这里添加交互功能，比如动态切换flex属性
            console.log('页面加载完成，准备好学习Flexbox了！');
        });
    </script>
</body>
</html>
